var usr = document.querySelector("#usr");
var usrTip = document.querySelector(".usrTip");
var pass = document.querySelector("#pass");
var passTip = document.querySelector(".passTip");
var confirmPass = document.querySelector("#confirmPass");
var confirmPassTip = document.querySelector(".confirmPassTip");
var email = document.querySelector("#email");
var emailTip = document.querySelector(".emailTip");
var registerBtn = document.querySelector(".registerBtn");
var validArr = [usr, pass, confirmPass, email];
var regList = {
    "usrReg": /^[a-z\u2E80-\u9FFF\-_0-9]{4,20}$/i,
    "pureNumber": /^\d+$/i,
    "maxlength4": /^.{0,4}$/,
    "hasNumber": /\d/,
    "hasLetter": /[a-zA-Z]/,
    "hasSC": /[\!\@\#\$\%\^]/,
    "minlength6": /^.{0,6}$/,
    "email": /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@[0-9a-z]{2,9}\.[a-z]{2,6}(\.[a-z]{2,3})?$/i
}
usr.addEventListener("focus", inputFocus(usr));
usr.addEventListener("blur", inputBlur(usr));
pass.addEventListener("focus", inputFocus(pass));
pass.addEventListener("blur", inputBlur(pass));
confirmPass.addEventListener("focus", inputFocus(confirmPass));
confirmPass.addEventListener("blur", inputBlur(confirmPass));
email.addEventListener("focus", inputFocus(email));
email.addEventListener("blur", inputBlur(email));
registerBtn.addEventListener("click", registerSubmit);
function inputFocus(dom) {
    return function () {
        dom.parentNode.style.borderColor = "rgb(102, 102, 102)";
        dom.nextElementSibling.style.display = "block";
    }
}
function inputBlur(dom) {
    return function () {
        dom.parentNode.style.borderColor = "#ddd";
        validate(dom);
    }
}
function validate(dom) {
    switch (dom.id) {
        case "usr": validUsr(); break;
        case "pass": validPass(); break;
        case "confirmPass": validConfirmPass(); break;
        case "email": validEmail(); break;
    }
}
function success(input, tipEle) {
    // alert("成功")
    input.classList.remove("success");
    tipEle.innerHTML = "";
    tipEle.style.display = "none";
    input.className += " success";
    input.parentNode.style.borderColor = "rgb(102, 102, 102)";

}

function error(tip, input, tipEle) {
    tipEle.style.display = "block";
    input.classList.remove("success");
    // 报错;
    tipEle.className += " warn";
    tipEle.innerHTML = tip;
}
// 验证正则成功与否;
function validateReg(str, reg) {
    return reg.test(str);
}
function validUsr() {
    var usrValue = usr.value;
    if (validateReg(usrValue, regList.maxlength4)) {
        return error("请输入5位以上的账号", usr, usrTip);

    }
    if (validateReg(usrValue, regList.pureNumber)) {
        return error("用户名不能为纯数字", usr, usrTip);
    }
    if (validateReg(usrValue, regList.usrReg)) {
        return success(usr, usrTip);
    }
    return error("支持中文，英文，数字，字母，-，_ 的4~20位字符", usr, usrTip);
}
function validPass() {
    var passValue = pass.value;
    var strength = 0;
    if (validateReg(passValue, regList.hasNumber)) {
        strength++;
    }
    if (validateReg(passValue, regList.hasLetter)) {
        strength++;
    }
    if (validateReg(passValue, regList.hasSC)) {
        strength++;
    }
    if (validateReg(passValue, regList.minlength6)) {
        return error("请输入6位以上的代码", pass, passTip)
    }
    if (strength === 3) {
        success(pass, passTip)
    } else if (strength === 2) {
        error("密码强度不足，建议升级密码", pass, passTip)
    } else if (strength === 1) {
        error("密码强度严重不足，强烈建议升级密码", pass, passTip)
    }
}
function validConfirmPass() {
    var confirmPassValue = confirmPass.value;
    var passValue = pass.value;
    if (confirmPassValue === "") {
        return error("请再次输入密码", confirmPass, confirmPassTip);
    }
    if (confirmPassValue != passValue) {
        return error("输入的密码与设置的密码不符", confirmPass, confirmPassTip);
    } else {
        return success(confirmPass, confirmPassTip);
    }
}
function validEmail() {
    var emailValue = email.value;
    if (validateReg(emailValue, regList.email)) {
        return success(email, emailTip);
    } else {
        return error("请输入正确的邮箱", email, emailTip);
    }
}
function registerSubmit() {
    for (var i = 0, ele; ele = validArr[i++];) {
        if (ele.className.split(" ").indexOf("success") === -1) {
            ele.focus();
            return;
        }
    }
    alert("注册成功!");
    location.href = "index.html";
}